<template>
    <div id='operate-assign-records'>
        <h1 class="card-title">
            <!-- <span>认证分配记录</span> -->
            <div class="card-title__button-box">
                <div class="form-item__value">
                    <input type="text" placeholder="请输入手机号" v-model='phone'>
                </div>
                <div class="form-item__value">
                    <select-group v-model='statusSelect'>
                        <select-option value='' text='所有分配状态'></select-option>
                        <select-option value='0' text='待分配'></select-option>
                        <select-option value='1' text='已分配'></select-option>
                    </select-group>
                </div>
                <div class="form-item__value" v-if='operatorList.length'>
                    <select-group v-model='operateSelect'>
                        <select-option value='' text='所有专属客服'></select-option>
                        <select-option v-for='item in operatorList' :key='item.id' :value='item.id' :text='item.name'></select-option>
                    </select-group>
                </div>
                <div class="card-title__button" @click='getList(1)'>确定</div>
            </div>
        </h1>
        <ul class="user-data__list">
            <li class="user-data__item col-4">
                <div class="user-data__wrap">
                    <p>已分配</p>
                    <span> {{ operatorInfo.allotCount || placeholder }} </span>
                </div>
            </li>
            <li class="user-data__item col-4">
                <div class="user-data__wrap">
                    <p>未分配</p>
                    <span> {{ operatorInfo.notAllotCount || placeholder }} </span>
                </div>
            </li>
            <li class="user-data__item col-4">
                <div class="user-data__wrap">
                    <p>已处理</p>
                    <span> {{ operatorInfo.dealCount || placeholder }} </span>
                </div>
            </li>
            <li class="user-data__item col-4">
                <div class="user-data__wrap">
                    <p>未处理</p>
                    <span> {{ operatorInfo.noDealCount || placeholder }} </span>
                </div>
            </li>
        </ul>
        
        <loading v-if='loading'></loading>
        <p class='no-data' v-if='!loading && !records.length'>暂无数据</p>
        <div class="table-list" v-if='!loading && records.length'>
            <table>
                <thead class="table-list__head">
                    <tr>
                        <th>姓名</th>
                        <th>分配状态</th>
                        <th>处理状态</th>
                        <th>专属客服</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody class='table-list__body have-border'>
                    <tr v-for='item in records'>
                        <td>{{ item.name || placeholder }}</td>
                        <td>{{ item.allotStatus || placeholder }}</td>
                        <td>{{ item.dealStatusStr || placeholder }}</td>
                        <td>{{ (item.operator && item.operator.name) || placeholder }}</td>
                        <td>
                            <div class='option-box'>
                                <span class='option-button' v-if='item.allotStatus == "未分配"' @click='showModalAllot(item)'>分配专属客服</span>
                                <span class='option-button' 
                                    v-if='item.allotStatus == "已分配" && item.dealStatus == "WAITCHECK"' 
                                    @click='showModalAllot(item)'>修改专属客服</span>
                                <span class='option-button' v-if='item.dealStatus != "WAITCHECK" '>--</span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
           <!--  <pagination
               :current-page='listInfo.pageNum':page-sizes="[50, 100, 200]"
               :total-page='listInfo.totalPage' @size-change="handleSizeChange"
               @pageChange='getList'></pagination> -->
              
                <!-- <el-pagination class="pan" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listInfo.pageNum" :page-sizes="[12,50, 100, 200]" :page-size="listInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" 
                :total="listInfo.totalCount" :background="true">
                            </el-pagination> -->
            <el-pagination class="pan" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listInfo.pageNum" :page-sizes="[12,50, 100, 200]" :page-size="12" layout="total,  prev, pager, next, jumper" 
                        :total="listInfo.totalCount" :background="true">
            </el-pagination>
        </div>

        

        <modal 
            title='分配专属客服'
            :show='show_modal_allot' 
            :loading='loading_allot' 
            @close='show_modal_allot=false'
            @confirm='saveAllot'>
            <div class="modal-allot">
                <div class="modal-form-wrap">
                    <ul class='modal-form'>
                        <li class='form-item' v-if='show_modal_allot'>
                            <span class="form-item__key">专属客服</span>
                            <div class="form-item__value" v-if='operatorList.length'>
                                <select-group v-model='operateModalSelect'>
                                    <select-option v-for='item in operatorList' :key='item.id' :value='item.id' :text='item.name'></select-option>
                                </select-group>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import datePicker from '../components/DatePicker.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import toYuan from '../filters/filter-toYuan'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { operateApi, loanApi, authApi, allApi, lenderApi } from '../api/api'
    import moment from 'moment'


    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            tabBox,
            tab,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            datePicker
        },
        filters:{
            dateFormat,
            toYuan,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        data() {
            return {
                placeholder:'--',
                curItem:{},
                listInfo:{},
                records:[],
                phone:'',
                show_modal_allot:false,
                loading_allot:false,
                operatorList:[],
                operatorInfo:{},
                statusSelect:{
                    value:'',
                    text:'所有分配状态'
                },
                operateSelect:{
                    value:'',
                    text:'所有专属客服'
                },
                operateModalSelect:{
                    value:'',
                    text:'请选择专属客服'
                },
                recommendType:{
                    value:'',
                    text:'请选择推荐类型'
                },
                loading:true,
                pageSize:12,
                totalCount:'',
                pageNum:1,
                TimeStr:null,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            hasUserCount(){
                return !_.isEmpty(this.userCount)
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
            handleSizeChange(val){
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.getList();
            },
            handleCurrentChange(val){
                console.log(`当前页: ${val}`);
                this.getList(val)
            },
            // function
            getList(num =1){
                this.loading = true
                operateApi.authList({
                    pageSize:this.pageSize,
                    pageIndex:num,
                    phone:this.phone,
                    allotStatus:this.statusSelect.value,
                    operatorId:this.operateSelect.value
                })
                .then(result=>{
                    this.loading = false
                    this.listInfo = result
                    this.totalCount=result.totalCount;
                    this.pageNum=result.pageNum;
                    this.records = result.records
                    if(result.totalPage < result.pageNum){
                        this.getList(result.totalPage)
                    }
                    this.TimeStr=new Date().getTime();
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
                
            },
            getOperatorList(num){
                operateApi.allotOperatorList({
                    type:'auth'
                })
                .then(result=>{
                    this.operatorList = result
                })
                .catch(error => {
                    console.error(error)
                })
            },
            getAuthStatisInfo(num){
                this.operatorInfo = {}
                operateApi.authStatisInfo()
                .then(result=>{
                    this.operatorInfo = result
                })
                .catch(error => {
                    console.error(error)
                })
            },
            showModalAllot(item){
                this.operateModalSelect = {
                    value:'',
                    text:'请选择专属客服'
                },
                this.show_modal_allot = true
                this.curItem = item
            },
            saveAllot(){
                this.loading_allot = true
                operateApi.changeAuth({
                    id:this.curItem.id,
                    operatorId:this.operateModalSelect.value
                })
                .then(result=>{
                    this.loading_allot = false
                    this.show_modal_allot = false
                    this.getList(this.currentPage)
                    this.getAuthStatisInfo()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_allot = false
                })
            },
        },
        created(){
            this.getList(1)
            this.getOperatorList()
            this.getAuthStatisInfo()
        }
    }
</script>

<style lang="scss" scoped>
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #operate-assign-records{
        .modal-allot{
            // padding-bottom: 300px;
        }
    }
    body .user-data__wrap p{
        font-size:16px;
         color:#333;
    }
    body .user-data__wrap span{
        font-size:32px;
        color:#333;
    }
    .pan{
        margin-top:20px;
    }
    .form-item__value{
        width:146px;
        height:44px;
        margin-left:20px!important;
        iuput{
            width:146px;
            height:44px;
        }
    }
    .user-data__list li{
        height:113px;
        width:253px;
        margin-left:30px;
    }
    .user-data__list li:nth-child(1){
         margin-left:0px;
    }
    body .user-data__wrap{
        padding:20px 0 30px 20px;
    }
    body .table-list__head th, body .table-list__head td{
        font-size:16px;
    }
</style>
